<template>
    <div class="goods-item">
        <image resize="cover" class="goods-img" :src="getImg(goods.img)" @click="addCart"></image>

        <div class="goods-right">
            <text class="goods-title font-msyhl" @click="goToDetail">{{goods.title}}{{goods.goodsunit}}</text>

            <div class="goods-des">
                <text class="goods-price font-msyhl">{{goods.price | currency('¥')}}</text>

                <div class="goods-btns">
                    <!--<image resize="stretch" class="goods-btn" :src="goods.cart_num <= 0 ? decreaseGrayBtn : decreaseBtn" @click="decreaseCart"></image>-->
                    <image resize="stretch" class="goods-btn" :src="decreaseBtn" @click="decreaseCart"></image>
                    <text class="goods-num font-msyhl">{{goods.cart_num || 0}}</text>
                    <image resize="stretch" class="goods-btn" :src="goods.cart_num >= goods.g_num ? increaseGrayBtn: increaseBtn" @click="increaseCart"></image>
                </div>
            </div>
        </div>
    </div>
</template>

<style socped>
    .goods-item {
        width: 400px;
        height: 198px;
        flex-direction: row;
        align-items: center;
        background-color: #fff;
    }
    .goods-img {
        width: 200px;
        height: 198px;
    }
    .goods-right {
        width: 200px;
        height: 198px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 12px;
        padding-bottom: 20px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .goods-des {
        height: 100px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .goods-title {
        lines: 2;
        text-overflow: ellipsis;
        font-size: 26px;
        color: #4d2805;
    }
    .goods-price {
        font-size: 28px;
        color: #e31336;
    }
    .goods-btns {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .goods-btn {
        width: 35px;
        height: 35px;
    }
    .goods-num {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 28px;
        color: #e31336;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
     import defaultImg from 'assets/images/default-img.png';
     import increaseBtn from 'assets/images/increase-icon.png';
     import increaseGrayBtn from 'assets/images/increase-icon-gray.png';
     import decreaseBtn from 'assets/images/decrease-icon.png';
     import decreaseGrayBtn from 'assets/images/decrease-icon-gray.png';
     import modal from 'utils/modal';
     import navigator from 'utils/navigator';
     import route from 'constants/route';
     import constant from 'constants/constant';
     import api from 'api/api';
     import cartService from 'services/cartService';
     import storage from 'utils/storage';

     export default{
        data() {
            return {
                defaultImg: defaultImg,
                increaseBtn: increaseBtn,
                increaseGrayBtn: increaseGrayBtn,
                decreaseBtn: decreaseBtn,
                decreaseGrayBtn: decreaseGrayBtn,
                loading: false
            }
        },
        props: {
            goods: {
                type: Object,
                required: true
            }
        },
        methods: {
            getImg(url){
                if(!url) return defaultImg;
                return url + '?width=200';
            },
            getMaxCartItem(callback){ //获取storage里的购物车种类
                let self = this;
                storage.getItem('cartInfo').then(res=>{
                    res = res || {};
                    if(Array.prototype.toString.call(res) == "[object String]")  res = JSON.parse(res);
                    let _totalItems = res.totalItems || 0;
                    if(self.goods.cart_num == 0 && _totalItems >= constant.MAX_TOTAL_ITEMS) {
                        modal.toast("已达添加上限");
                        return false;
                    }

                    if(typeof callback == 'function') callback(res);
                });
            },
            addCart(e) { //点击图片动画并更新购物车
                let self = this;
                if(self.loading) return false;
                if(self.goods.g_num <= self.goods.cart_num) {
                    modal.toast('该商品暂时缺货，不能加入购车');
                    return false;
                }

                self.getMaxCartItem(ret=>{
                    //通知原生执行加入购物车动画
                    let _pos = {
                        startX: parseFloat(e.position.x) || 0,
                        startY: parseFloat(e.position.y) || 0,
                        goodsUrl: self.goods.img + '?width=200'
                    }
                    cartService.addCartAnimation(_pos);

                    self.loading = true;
                    //存储本地购物车数量并发送加入购物车成功事件
                    api.sendHttp('addCartApi', {
                        goods: self.goods.id + '_' + 1 + '_' + 1
                    }).then(res => {
                        self.loading = false;
                        self.goods.cart_num ++;
                        cartService.sendEvent(res.data,res.data.goods);
                    }, res => {
                        self.loading = false;
                        modal.toast(res.msg || '加入购物车失败');
                    });
                });
            },
            decreaseCart() { //从购物车递减商品
                let self = this;
                if(self.loading) return false;
                if(self.goods.cart_num <= 0) {
                    return false;
                }

                self.loading = true;
                api.sendHttp('updateCartApi', {
                    goods: self.goods.id + '_' + (parseInt(self.goods.cart_num)-1) + '_' + 1
                }).then(res => {
                    self.loading = false;
                    self.goods.cart_num --;
                    cartService.sendEvent(res.data,res.data.goods);
                }, res => {
                    self.loading = false;
                    modal.toast(res.msg || '操作失败');
                });
            },
            increaseCart() { //增加商品至购物车
                let self = this;
                if(self.loading) return false;
                if(self.goods.g_num <= self.goods.cart_num) {
                    modal.toast('该商品暂时缺货，不能加入购车');
                    return false;
                }

                self.getMaxCartItem(ret=>{
                    self.loading = true;
                    api.sendHttp('updateCartApi', {
                        goods: self.goods.id + '_' + (parseInt(self.goods.cart_num)+1) + '_' + 1
                    }).then(res => {
                        self.loading = false;
                        self.goods.cart_num ++;
                        cartService.sendEvent(res.data,res.data.goods);
                    }, res => {
                        self.loading = false;
                        modal.toast(res.msg || '操作失败');
                    });
                });
            },
            goToDetail() {
                let self = this;
                if(!self.goods || !self.goods.id) {
                    modal.toast('该商品不存在...');
                    return false;
                }
                navigator.push({
                    url: route.detail_index,
                    title: '商品详情',
                    params: {
                        id: self.goods.id
                    }
                }, event => {
                    console.log('go to detail ...');
                });
            }
        }
    }
</script>
